<!--
 * @Descripttion:
 * @version: 1.0
 * @Author: Teemor
 * @Date: 2024-04-03 11:18:58
-->
<route lang="json5" type="home">
{
  needLogin: true,
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '设备列表',
    disableScroll: false,
  },
}
</route>
<template>
  <view class="deviceList">
    <view class="topBox" :style="{ paddingTop: safeAreaInsets.top + 'px' }">
      <uv-navbar
        leftText="设备列表"
        leftIconSize="0"
        fixed
        leftIconColor="#fff"
        :bgColor="bgColor"
      />
      <view style="height: 88rpx"></view>
      <view
        class="searchBox flex pl-[27rpx] pr-[27rpx] flex-items-center"
        :style="{ top: safeAreaInsets.top + 44 + 'px', background: bgColor }"
      >
        <uv-search
          v-model="keyword"
          searchIconColor="#354970"
          :showAction="false"
          shape="round"
          :clearable="false"
          placeholder="请输入设备编号"
          bgColor="#fff"
          @search="search"
        ></uv-search>
        <view class="ml-[28rpx]">
          <uv-icon
            name="shaixuan-"
            custom-prefix="custom-icon"
            size="22"
            @click="popupClassRef.open()"
            color="#fff"
          ></uv-icon>
        </view>
      </view>
      <view class="bg">
        <uv-image
          width="100%"
          height="100%"
          mode="aspectFill"
          duration="450"
          :fade="true"
          :src="bg"
        ></uv-image>
      </view>
    </view>
    <view v-if="list.length" class="list">
      <view
        v-for="(item, i) in list"
        class="item flex flex-items-center grid-justify-between"
        :class="reClass(item.status)"
        :key="i"
        @click="toDetail(item)"
      >
        <view class="flex">
          <view class="mr-3">
            <gc-statusIcon :status="item.status" />
          </view>
          <view>
            <view class="font-size-[38rpx] color-[#354970]">{{ item.title }}</view>
            <view class="font-size-[24rpx] mt-1 color-[#6E7D99] flex flex-items-center">
              {{ status[item.status]?.name }}
              <view
                v-if="item.isOnline"
                class="flex font-size-3 flex-items-center"
                :style="{
                  color: reColor(item.electricity),
                }"
              >
                <view class="battery mr-1">
                  <view
                    class="batteryL"
                    :style="{
                      background: reColor(item.electricity),
                      width: item.electricity + '%',
                    }"
                  ></view>
                </view>
                {{ item.electricity }}%
              </view>
            </view>
          </view>
        </view>
        <view class="flex flex-items-center">
          <view class="round" :style="`background:${item.isOnline ? '#23BD86' : '#9CA8BB'}`"></view>
          <view
            class="status mr-[27rpx] font-size-[28rpx]"
            :style="`color: ${item.isOnline ? '#23BD86' : '#6E7D99'}`"
            >{{ item.isOnline ? '在线' : '离线' }}</view
          >
          <uv-icon
            name="xiangyoujiantou"
            custom-prefix="custom-icon"
            size="20"
            color="#596E96"
          ></uv-icon>
        </view>
      </view>
    </view>

    <view v-else class="nodata" :style="{ top: safeAreaInsets.top + 100 + 'px' }">
      <uv-image :src="nodata" mode="aspectFit" width="300rpx" height="250rpx" />
      <view class="tips">暂无数据</view>
      没有内容，请刷新或返回首页
    </view>
    <gc-popupClass ref="popupClassRef" @change="change" />
    <gc-tabbar />
  </view>
</template>

<script setup lang="ts" name="energyStorage">
import bg from '@/static/images/icon/bg.png'
import nodata from '@/static/images/icon/nodata.png'
const { safeAreaInsets, windowHeight } = uni.getSystemInfoSync()
const popupClassRef = ref()
const bgColor = ref('rgba(154,202,252,0)')
onPageScroll(({ scrollTop }) => {
  bgColor.value = scrollTop > 10 ? '#226cff' : 'rgba(154,202,252,0)'
})
const keyword = ref('')
const search = () => {}
const status = {
  1: { color: '#85E5C5', class: 'working', name: '运行中', icon: 'yunhang' },
  2: { color: '#A8C8FF', class: 'shutdown', name: '停机', icon: 'daiji' },
  3: { color: '#CEC4FF', class: 'standby', name: '待机', icon: 'daiji1' },
  4: { color: '#FFC2AD', class: 'fault', name: '故障', icon: 'accident-1' },
  5: { color: '#FFC2AD', class: 'fault', name: '待安装', icon: 'accident-1' },
}
const reClass = (n) => {
  return status[n].class
}
const reColor = (n) => {
  return n > 80 ? '#63D7AC' : n < 20 ? '#9CA8BB' : '#FEBCA5'
}
const list = [
  {
    title: 'XG2409001',
    status: 1,
    electricity: 91,
    isOnline: true,
    id: 1,
  },
  {
    title: 'XG2409001',
    status: 2,
    electricity: 80,
    isOnline: true,
    id: 2,
  },
  {
    title: 'XG2409001',
    status: 3,
    electricity: 0,
    isOnline: false,
    id: 3,
  },
  {
    title: 'XG2409001',
    status: 4,
    electricity: 45,
    isOnline: false,
    id: 4,
  },
  {
    title: 'XG2409001',
    status: 1,
    electricity: 91,
    isOnline: true,
    id: 1,
  },
  {
    title: 'XG2409001',
    status: 2,
    electricity: 80,
    isOnline: true,
    id: 2,
  },
  {
    title: 'XG2409001',
    status: 3,
    electricity: 0,
    isOnline: false,
    id: 3,
  },
  {
    title: 'XG2409001',
    status: 4,
    electricity: 45,
    isOnline: false,
    id: 4,
  },
  {
    title: 'XG2409001',
    status: 1,
    electricity: 91,
    isOnline: true,
    id: 1,
  },
  {
    title: 'XG2409001',
    status: 2,
    electricity: 80,
    isOnline: true,
    id: 2,
  },
  {
    title: 'XG2409001',
    status: 3,
    electricity: 0,
    isOnline: false,
    id: 3,
  },
  {
    title: 'XG2409001',
    status: 4,
    electricity: 45,
    isOnline: false,
    id: 4,
  },
  {
    title: 'XG2409001',
    status: 1,
    electricity: 91,
    isOnline: true,
    id: 1,
  },
  {
    title: 'XG2409001',
    status: 2,
    electricity: 80,
    isOnline: true,
    id: 2,
  },
  {
    title: 'XG2409001',
    status: 3,
    electricity: 0,
    isOnline: false,
    id: 3,
  },
  {
    title: 'XG2409001',
    status: 4,
    electricity: 45,
    isOnline: false,
    id: 4,
  },
]
const change = (e) => {
  console.log(e, 123)
}
const toDetail = () => {
  uni.navigateTo({ url: '/pages/device/contentDetail' })
}
onMounted(() => {})
</script>

<style scoped lang="scss">
.deviceList {
  padding-bottom: 80rpx;

  .topBox {
    position: relative;
    height: 227rpx;
    background: #226cff;

    &::before {
      position: absolute;
      bottom: -25px;
      left: 0;
      width: 100%;
      height: 50px;
      content: '';
      background: #226cff;
      border-radius: 90%;
    }
  }

  .bg {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .searchBox {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 2;
    padding-bottom: 20rpx;
  }

  .nodata {
    position: absolute;
    top: 140px;
    right: 24rpx;
    left: 24rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 500rpx);
    font-size: 22rpx;
    color: #6e7d99;
    background: #fff;
    border-radius: 20rpx;
    box-shadow: 0rpx 2rpx 25rpx 0rpx rgb(43 43 43 / 6%);

    .tips {
      padding: 72rpx 0 30rpx;
      font-size: 40rpx;
      color: #226cff;
    }
  }

  .list {
    padding: 0 24rpx;
    margin-top: -80rpx;

    .battery {
      position: relative;
      box-sizing: border-box;
      width: 44rpx;
      height: 22rpx;
      padding: 1px;
      margin-left: 18rpx;
      border: 2rpx solid #6e7d99;
      border-radius: 4rpx;

      .batteryL {
        height: 100%;
      }

      &::after {
        position: absolute;
        top: 50%;
        right: -6rpx;
        width: 4rpx;
        height: 10rpx;
        margin-top: -5rpx;
        content: '';
        background: #6e7d99;
      }
    }

    .item {
      position: relative;
      padding: 30rpx 37rpx;
      margin-top: 30rpx;
      overflow: hidden;
      background: #fff;
      border-radius: 20rpx;
      box-shadow: 0rpx 2rpx 25rpx 0rpx rgb(43 43 43 / 16%);

      &::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 10rpx;
        content: '';
        background: #000;
      }

      .round {
        width: 16rpx;
        height: 16rpx;
        margin-right: 16rpx;
        background: #9ca8bb;
        border-radius: 50%;
      }

      &.working {
        &::after {
          background: #85e5c5;
        }
      }

      &.shutdown {
        &::after {
          background: #a8c8ff;
        }
      }

      &.standby {
        &::after {
          background: #cec4ff;
        }
      }

      &.fault {
        &::after {
          background: #ffc2ad;
        }
      }
    }
  }
}
</style>
